<template>
  <div class="select">
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item :label="$t(`table.${username}`)">
          <el-input
            v-model="selectData.nikeName"
            :placeholder="$t(`add.${input}`)"
          />
        </el-form-item>
        <el-form-item :label="$t(`table.${rolename}`)">
          <el-select
            v-model="selectData.role"
            class="m-2"
            placeholder="请选择"
          >
          <el-option :label="$t('add.total')" :value="0"></el-option>
            <el-option
              v-for="item in data.roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{$t('add.seek')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      class="list"
      :data="data.list"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column
        prop="nikeName"
        :label="$t(`table.${username}`)"
        width="160"
      />
      <el-table-column prop="role" :label="$t(`table.${rolename}`)" width="230">
        <template #default="scope">
          <el-button link v-for="i in scope.row.role" :key="i.role" type="primary" size="small"
            >{{i.roleName}}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="role" :label="$t(`table.action`)" width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="eidFun(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="data.isShow" title="编辑">
    <el-form :model="data.active">
      <el-form-item label="姓名" label-width="50px" placeholder="请输入姓名">
        <el-input v-model="data.active.nikeName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px" >
        <el-select v-model="data.active.role" multiple placeholder="请选择角色">
          <el-option
              v-for="item in data.roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.isShow = false">取消</el-button>
        <el-button type="primary" @click="userChange">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script setup lang="ts">
import { reactive } from "@vue/reactivity";
import { InitData, ListInt } from "../../../type/user";
import { getUserList, getRoleList } from "../../../http/api";
import { onMounted } from "@vue/runtime-core";

const data = reactive(new InitData());
const { selectData, username, rolename, input } = data;

const onSubmit = () => {
  // console.log(selectData);
  let arr: [ListInt][] = [];
  if (selectData.nikeName || selectData.role) {
    if(selectData.nikeName) {
      arr = data.listData.filter((v:any) => v.nikeName.indexOf(selectData.nikeName) != -1);
    }
    if(selectData.role) {
      arr = (selectData.nikeName?arr:data.list).filter((v:any) => v.role.find((i:any)=>i.role===data.selectData.role));
    }
  } else {
    arr = data.listData;
  }
  data.list = arr
};
onMounted(() => {
  getUserList().then((res) => {
    console.log(res);
    data.list = res.data;
    data.listData = res.data
  });
  getRoleList().then((res) => {
    // console.log(res,111);
    data.roleList = res.data;
  });
});
const eidFun = (row:ListInt) => {
  // console.log(row);
  data.active = {
    id:row.id,
    userName:row.userName,
    nikeName:row.nikeName,
    role:row.role.map((v:any)=> v.role || v.roleId)
  }
  data.isShow = true
}
const userChange = () => {
  const obj:any = data.list.find((v:any)=>v.id === data.active.id)//确定类型可以用any
  obj.nikeName = data.active.nikeName
  obj.role = data.roleList.filter((v:any)=>data.active.role.indexOf(v.roleId)!==-1)
  data.isShow = false
}
</script>
  
  <style lang="scss" scoped>
.select {
  width: 100%;
  height: 100%;
}
:deep(.list) {
  padding-left: 35px;
}
</style>